<template>
    <div class="typeleft" > 
        <div v-for="( item , i ) of typeleft"   :key="'ti'+i" @click="LeftClick(i,{pid:item.maitKey,fcid:item.miniWallkey})"  :class="selltype.flag==i?'div_active':''">
            <li  :class="selltype.flag==i?'type_active':''" >
                {{ item.title }}
            </li>
        </div>
        
    </div>
</template>

<script>

import BScroll from "better-scroll";

import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    data() {
        return {
            
        }; 
    },
    props:{
        typeleft:null,
        num:null
    },
    computed:{
        ...mapState(['selltype'])
    },
    components: {},
    methods:{
        LeftClick(data,result){
            this.changeLeftStyle(data)
            this.TypeRightData(result)
        },
        ...mapActions(['changeLeftStyle']),
        ...mapActions(['TypeRightData']),
    },
    mounted(){
       
    }
};
</script>

<style lang='less' scoped>
    .typeleft{
        width:180px;
        height:100%;
        background: #f6f6f6;
        >div{
            height:65px;
            padding-top:25px;
            li{
                list-style: none;
                height:40px;
                text-align: center;
                line-height: 40px;
            }
        }
    
    }
    .type_active{
        border-left: solid #FF5577 4px;
        font-weight: bold;
        color:#FF5577;
    }
    .div_active{
        background: #ffffff;
    }
    
</style>

